<template>
  <div class="app-container home">
    <!-- Welcome Banner -->
    <div class="welcome-banner">
      <div class="banner-content">
        <h1>管道装备制造质量管控系统</h1>
        <p>高效、精准、智能的质量管理解决方案</p>
      </div>
    </div>

    <!-- Statistics Cards -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.inspections }}</div>
            <div class="stat-label">今日检验任务</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon">
            <el-icon><Warning /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.nonconforming }}</div>
            <div class="stat-label">待处理不合格品</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon">
            <el-icon><Tools /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.repairs }}</div>
            <div class="stat-label">待维修任务</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon">
            <el-icon><DataAnalysis /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.qualityRate }}%</div>
            <div class="stat-label">本月合格率</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- Quick Access Section -->
    <div class="section-title">
      <h2>快速访问</h2>
    </div>
    <el-row :gutter="20" class="quick-access">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in quickAccessItems" :key="index">
        <el-card shadow="hover" class="quick-card" @click="navigateTo(item.path)">
          <div class="quick-icon">
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
          </div>
          <div class="quick-title">{{ item.title }}</div>
          <div class="quick-desc">{{ item.description }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- System Info -->
    <div class="system-info">
      <p>系统版本: {{ version }} | <el-link type="primary" @click="navigateTo('/qms-help/index')">帮助中心</el-link> | <el-link type="primary" @click="navigateTo('/system-info/index')">系统信息</el-link></p>
    </div>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Check, Warning, Tools, DataAnalysis, Document, Monitor, ShoppingCart, Bell, Reading, Histogram } from '@element-plus/icons-vue';

const version = ref('3.8.7');
const router = useRouter();

// Mock statistics data - in a real app, this would come from an API
const stats = ref({
  inspections: 24,
  nonconforming: 5,
  repairs: 3,
  qualityRate: 98.5
});

// Quick access items
const quickAccessItems = ref([
  {
    title: '质量检验',
    description: '查看和管理质量检验任务',
    icon: Check,
    path: '/qep/inspection/task'
  },
  {
    title: '不合格品管理',
    description: '处理不合格品记录',
    icon: Warning,
    path: '/qep/nonconforming'
  },
  {
    title: '维修任务',
    description: '查看和处理维修任务',
    icon: Tools,
    path: '/qep/repair-task'
  },
  {
    title: '质量数据分析',
    description: '查看质量统计和趋势',
    icon: DataAnalysis,
    path: '/qep/dataan'
  },
  {
    title: '质量证书',
    description: '管理产品质量证书',
    icon: Document,
    path: '/qep/certificate'
  },
  {
    title: '设备管理',
    description: '查看和管理生产设备',
    icon: Monitor,
    path: '/basic/equipment'
  }
]);

// Navigation function
function navigateTo(path) {
  router.push(path);
}

function goTarget(url) {
  window.open(url, '__blank');
}

// Simulate loading real data
onMounted(() => {
  // In a real app, you would fetch data from your API here
  console.log('Dashboard mounted');
});
</script>

<style scoped lang="scss">
.home {
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  
  .welcome-banner {
    background: linear-gradient(135deg, #1976D2 0%, #64B5F6 100%);
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"), linear-gradient(135deg, #1976D2 0%, #64B5F6 100%);
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 30px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out;
    
    &:before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      transform: rotate(30deg);
    }
    
    .banner-content {
      max-width: 800px;
      position: relative;
      z-index: 1;
      
      h1 {
        font-size: 32px;
        font-weight: 500;
        margin: 0 0 10px 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
      
      p {
        font-size: 18px;
        opacity: 0.9;
        margin: 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
    }
  }
  
  .section-title {
    margin: 40px 0 20px;
    animation: fadeIn 1s ease-out;
    
    h2 {
      font-size: 24px;
      font-weight: 500;
      color: #333;
      position: relative;
      padding-left: 15px;
      
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 24px;
        width: 4px;
        background-color: #1976D2;
        border-radius: 2px;
      }
    }
  }
  
  .stat-cards {
    margin-bottom: 30px;
    
    .stat-card {
      height: 120px;
      display: flex;
      align-items: center;
      transition: all 0.3s;
      animation: fadeInUp 0.8s ease-out;
      animation-fill-mode: both;
      
      @for $i from 1 through 4 {
        &:nth-child(#{$i}) {
          animation-delay: #{0.1 * $i}s;
        }
      }
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .stat-icon {
        font-size: 48px;
        color: #1976D2;
        margin-right: 20px;
      }
      
      .stat-info {
        .stat-value {
          font-size: 28px;
          font-weight: 600;
          color: #333;
          line-height: 1.2;
        }
        
        .stat-label {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }
  
  .quick-access {
    margin-bottom: 30px;
    
    .quick-card {
      height: 180px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 20px;
      transition: all 0.3s;
      margin-bottom: 20px;
      animation: fadeInUp 0.8s ease-out;
      animation-fill-mode: both;
      
      @for $i from 1 through 6 {
        &:nth-child(#{$i}) {
          animation-delay: #{0.15 * $i}s;
        }
      }
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
      }
      
      .quick-icon {
        font-size: 40px;
        color: #1976D2;
        margin-bottom: 15px;
      }
      
      .quick-title {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 10px;
      }
      
      .quick-desc {
        font-size: 14px;
        color: #666;
        line-height: 1.4;
      }
    }
  }
  
  .system-info {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #999;
    font-size: 14px;
    animation: fadeIn 1.5s ease-out;
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  // Responsive styles for mobile devices
  @media (max-width: 768px) {
    .welcome-banner {
      padding: 30px 20px;
      
      .banner-content {
        h1 {
          font-size: 24px;
        }
        
        p {
          font-size: 16px;
        }
      }
    }
    
    .stat-cards {
      .stat-card {
        height: 100px;
        margin-bottom: 15px;
        
        .stat-icon {
          font-size: 36px;
        }
        
        .stat-info {
          .stat-value {
            font-size: 24px;
          }
        }
      }
    }
    
    .quick-card {
      height: 160px !important;
      
      .quick-icon {
        font-size: 32px !important;
        margin-bottom: 10px !important;
      }
      
      .quick-title {
        font-size: 16px !important;
      }
      
      .quick-desc {
        font-size: 12px !important;
      }
    }
  }
}
</style>

